<!--
此组件负责登录功能实现

1.用户登录
  用户输入用户名和密码登录至bingo网站首页
  1.1 若点击'忘记密码'，则弹出找回密码组件
2.管理员登录
  管理员用户名和密码均为admin,登录成功跳转至M_Home页面，可对后台数据进行管理

-->

<template>
  <div style="padding:0;margin:0;">
    <div class="login">
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" class="login-form">
        <h3 class="title">Bingo系统</h3>
        <FormItem prop="nickName">
          <Input prefix="ios-contact" type="text" v-model="formCustom.nickName" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem prop="passwd">
          <Input prefix="md-grid" type="password" v-model="formCustom.passwd" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem>
          <Input prefix="md-grid" type="text" v-model="verificationCode"
                 placeholder="请输入验证码" style="width: 60%"
                 @keyup.enter.native="handleSubmit('formCustom')"></Input>
          <div class="login-code">
            <img :src="img_url" class="login-code-img" @click="getCaptcha">
          </div>
        </FormItem>
        <FormItem>
          <div style="width:25%;">
            <Select v-model="role" style="width:100px;margin-left:0px;padding-left:0px;">
              <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>

          </div>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="handleSubmit('formCustom')"
                  style="width:100%;"
          >登录</Button>
          <div style="align-items: end">
            <router-link class="link-type" :to="'/register'"
                         style="margin-top: 8px" >立即注册</router-link>
          <a style="margin:0px 0px 25px 20px">忘记密码</a>
          </div>
        </FormItem>
      </Form>
      <!--  底部  -->
      <div class="el-login-footer">
        <span>Bingo---一个集成视频与贴文的娱乐系统</span>
      </div>

    </div>
  </div>
</template>
<script>
// import {getCaptchaTest} from '@/utils/api';
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      }
      callback();
    };
    const validateNick = (rule,value,callback)=>{
      if (value === '') {
        callback(new Error('用户名不能为空'));
      }
      callback();
    };
    return {
      uuid:'',
      verificationCode:'',
      img_url: "",
      roleList:[
        {
          label:'用户登录',
          value:'User'
        },
        {
          label:'管理员登录',
          value:'Manager'
        }
      ],
      role:'User',
      formCustom: {
        nickName:'',
        passwd: ''
      },
      ruleCustom: {
        nickName:[
          {validator:validateNick,trigger:'blur'}
        ],
        passwd: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCaptcha();
    // 以下是暂时测试统一管理封装的api，不会推送给仓库
    // this.getCaptcha2();
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          switch (this.role){
            case "User":

              //将请求参数封装在json对象里
              let params = new URLSearchParams();
              params.append('username', this.formCustom.nickName);
              params.append('password', this.formCustom.passwd);
              params.append('uuid', this.uuid);
              params.append('captcha', this.verificationCode);

              this.$http.post('/api/login',params).then(res=>{
                let code = res.data.code
                console.log('res:',res)
                switch(code){
                  case 200 :
                    window.sessionStorage.setItem('token',res.data.data.token)
                    //window.sessionStorage.setItem('videoType',res.data.data.videoType)
                    window.sessionStorage.setItem('userId',res.data.data.user.userId)
                    this.$Message.success('登录成功，正在进入系统')
                    this.$router.push({
                      path:'/bingo'
                    })
                    break
                  default:
                    this.$Message.error('登录失败：'+res.data.codeInfo);
                }
              })
              break
            case "Manager":
              if(this.formCustom.nickName=='admin'&&this.formCustom.passwd=='admin'){
                this.$router.push({
                  path:'/M_Home'
                })
              }else{
                this.$Message.error('用户名或密码输入错误');
              }
          }
        } else {
          this.$Message.error('您的输入异常，请重新填写！');
        }
      })
    },
    getCaptcha(){
      this.$http.get('/api/getCaptcha').then(res=>{
        let cod = res.data.data.VerifyBase64
        this.uuid = res.data.data.uuid
        this.img_url ='data:image/png;base64,'+cod
        // console.log('code',cod)
        // console.log('img_url:',this.img_url)
      }).catch(error=>{
        console.log(error)
      })
    },

    // async getCaptcha2(){
    //   let result = await getCaptchaTest();
    //   console.log('result=>',result);
    // }

  },
}
</script>
<style >
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: url("../assets/images/login-background.jpeg");
    background-size: cover;
    position: fixed;
  }
  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }
  .login-code {
    width: 38%;
    height: 37px;
    float: right;
  }
  .login-code-img{
    cursor: pointer;
    vertical-align: middle;
  }
</style>
